<template>
  <div
    class="simba-edit-layout"
    id="simba-edit-layout"
    ref="editLayoutDom"
    @drop="dragHandle($event)"
    @dragover="dragoverHandle"
    @dragenter="dragoverHandle"
  >
    <EditRule>
      <div ref="editContentDom" id="simba-edit-content" class="range">
        <EditRange>
          <div v-for="(item, index) in chartEditStore.componentList" :key="index">
            <EditShapeBox
              :item="item"
              :style="{
                position: 'absolute',
                left: `${item.attr.x}px`,
                top: `${item.attr.y}px`,
                background: item.attr.background,
                width: `${item.attr.w}px`,
                height: `${item.attr.h}px`,
              }"
              @mousedown="mouseDownHandle($event, item)"
            >
              <div >{{ item.name }}-{{ item.attr.x }},{{ item.attr.y }}</div>
            </EditShapeBox>
          </div>
        </EditRange>
      </div>
    </EditRule>
    <EditFooter />
  </div>
</template>
<script setup lang="ts">
import{ computed } from "vue";
import {
  dragHandle,
  dragendHandle,
  dragoverHandle,
} from "@/views/ContentEdit/hooks/useDrag.hook";
import { EditRule } from "@/views/ContentEdit/EditRule";
import { EditFooter } from "@/views/ContentEdit/EditFooter";
import { EditShapeBox } from "@/views/ContentEdit/EditShapeBox";
import { EditRange } from "@/views/ContentEdit/EditRange";
import { useLayout } from "@/views/ContentEdit/hooks/useLayout.hook";
import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
import { useMouseHandle } from "@/views/ContentEdit/hooks/useDrag.hook";
const { mouseDownHandle } = useMouseHandle()
const chartEditStore = useChartEditStore();
useLayout();
</script>
<style lang="scss" scoped>
.simba-edit-layout {
  position: relative;
  width: 100%;
  height: calc(100vh - $--header-height);
  background-color: #18181c;
  background-size: 15px 15px, 15px 15px;
  background-image: linear-gradient(#18181c 14px, transparent 0),
    linear-gradient(90deg, transparent 14px, #fff 0);
  #simba-edit-content {
    overflow: hidden;
  }
  .range {
    box-shadow: 0 8px 10px rgba(30, 30, 30, 0.1215686275);
    transition: all 0.4s;
    box-shadow: 0 8px 10px rgba(30, 30, 30, 0.1215686275);
  }
}
</style>